<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>进度统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="lib\jquery-3.2.1.js"></script>
    <script src="lib\echarts.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="lib\font-awesome-4.7.0\css\font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="lib\materialize\css\materialize.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="assert\css\style.css" />
</head>
<body>
    <ul id="slide-mobile" class="sidenav sidenav-fixed">
        <li>
            <div class="user-view">
                <div class="background">
                    <img src="assert/img/office.jpg">
                </div>
                <a href="user.html"><img class="circle" src="assert/img/avatar-defualt.svg"></a>
                <a href="#name"><span class="white-text name">John Doe</span></a>
                <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
            </div>
        </li>
        <!-- <li><a href="#!">First Link With Icon</a></li> -->
        <!-- <li><div class="divider"></div></li> -->
        <li><a class="subheader">任务列表</a></li>
        <li class="no-padding">
            <ul class="collapsible collapsible-accordion">
                <li class="bold">
                    <a class="collapsible-header waves-effect waves-teal" tabindex="0">任务集一</a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#">任务列表一</a></li>
                            <li><a href="#">任务列表一</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
            <ul class="collapsible collapsible-accordion">
                <li class="bold">
                    <a class="collapsible-header waves-effect waves-teal" tabindex="0">任务集二</a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#">任务列表一</a></li>
                            <li><a href="#">任务列表一</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    <main>
        <!-- nav bar -->
        <nav>
            <div class="nav-wrapper">
                <a href="#" data-target="slide-mobile" class="sidenav-trigger"><i class="fa fa-navicon" style="font-size: 20px;display: inline;"></i></a>
                <a href="#" class="brand-logo center">TodoList</a>
                <ul class="right">
                    <li>
                        <a class="dropdown-trigger" href="#!" data-target="dropdown1"><i class="fa fa-ellipsis-v" style="font-size: 20px;display: inline;"></i></a>
                        <ul id="dropdown1" class="dropdown-content">
                            <li><a href="quadrant.html">四象限</a></li>
                            <li><a href="list.html">时间轴</a></li>
                            <li><a href="tracking.html">查看进度</a></li>
                            <li><a href="task_detail.html">添加任务</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        

        <div class="page-container">
            <div class="task-description">
                <p id="task-name">我的计划</p>
                <p class="static-item" id="task-total">总任务数<br><span>{{taskTotal}}</span></p>
                <p class="static-item" id="finished-total">完成数<br><span>{{finishedTotal}}</span></p>
                <p class="static-item" id="unfinished-total">未完成数<br><span>{{unfinishedTotal}}</span></p>
                <p class="static-item" id="overdue-total" style="border:none;">过期数<br><span>{{overdueTotal}}</span></p>
            </div>

            <div id="burnout-container" class="graph-container">
                <div id="burnout-map"></div>
            </div>

            <div class="graph-container">
                <div id="gantt-map"></div>
            </div>
            <br><br>
        </div>


    </main>
    <script src="lib\materialize\js\materialize.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="assert\js\dropdown.js"></script>
    <script src="assert\js\sidenav.js"></script>
    <script src="assert\js\tracking.js"></script>
</body>
</html>